<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { incrementNumber } from '@/utils/index';
import Pic1 from '@/assets/facility/airspace/pic1.svg'
import Pic2 from '@/assets/facility/airspace/pic2.svg'
import Pic3 from '@/assets/facility/airspace/pic3.svg'
import Pic4 from '@/assets/facility/airspace/pic4.svg'
import { incrementNumberComputed } from '../../utils';

// 渲染数据接口
interface IData {
  // 名称
  name: string;
  // 范围大小
  value: number;
  // 占比
  percent: number;
  // 图标自行附加
  icon: any
}

const sum = ref(0);
const data = ref<Array<IData>>([])

onMounted(() => {
  // TODO: 接口回来
  incrementNumber(2718, 1000, sum);

  data.value = [
    {
      name: '禁飞空域',
      value: 652.37,
      percent: 32.15,
      icon: Pic1
    },
    {
      name: '管制空域',
      value: 203,
      percent: 2.5,
      icon: Pic2
    },
    {
      name: '适飞空域',
      value: 1103.63,
      percent: 62.85,
      icon: Pic3
    },
    {
      name: '电子围栏',
      value: 203,
      percent: 2.5,
      icon: Pic4
    },
  ].map((item) => {
    return {
      ...item,
      value: incrementNumberComputed(item.value, 1000),
      percent: incrementNumberComputed(item.percent, 1000)
    }
  }) as any
})

</script>

<template>
  <div class="airspace">
    <div class="airspace-header"></div>
    <div class="airspace-content">
      <div class="airspace-content-sum">
        <h1>总空域</h1>
        <span class="airspace-content-sum-num">
          <span class="airspace-content-sum-num-num">{{ sum }}</span>
          <span class="airspace-content-sum-num-unit">km²</span>
        </span>
      </div>
      <div class="airspace-content-data">
        <div v-for="item in data" :key="item.name" class="airspace-content-data-item">
          <div class="airspace-content-data-item-icon">
            <img :src="item.icon" alt="">
          </div>
          <div class="airspace-content-data-item-content">
            <div class="airspace-content-data-item-content-name">{{ item.name }}</div>
            <div class="airspace-content-data-item-content-data">
              <div class="airspace-content-data-item-content-data-num">{{ item.value }}<span>km²</span>
              </div>
              <div class="airspace-content-data-item-content-data-percent"><span>占比</span>{{ item.percent }}%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.airspace {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: linear-gradient(287deg, rgba(2, 53, 115, 0.6) 10%, rgba(2, 53, 115, 0.4) 39%, rgba(41, 162, 255, 0.2) 113%);
  backdrop-filter: blur(4px);

  &-header {
    width: 100%;
    height: 74px;
    margin-top: -38px;
    margin-top: -38px;
    margin-bottom: 6px;
    background-image: url('@/assets/facility/airspace-header.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  &-content {
    box-sizing: border-box;
    width: 100%;
    height: 386px;
    padding: 10px 20px 20px 20px;
    border-radius: 0px 0px 24px 24px;
    background: linear-gradient(0deg, rgba(2, 53, 115, 0.4) 28%, rgba(2, 53, 115, 0.6) 52%, rgba(0, 56, 99, 0) 113%);

    &-sum {
      width: 100%;
      height: 44px;
      padding: 4px 20px;
      margin-bottom: 8px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(90deg, rgba(0, 87, 241, 0) 0%, rgba(0, 127, 231, 0.92) 46%, rgba(0, 87, 241, 0) 94%);
      box-sizing: border-box;
      border: 0.83px solid;
      border-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 0.9) 51%, rgba(255, 255, 255, 0) 97%) 0.83;
      color: #FFFFFF;

      h1 {
        font-family: Source Han Sans CN;
        font-size: 18px;
        font-weight: bold;
        line-height: 36px;
        letter-spacing: normal;
      }

      &-num {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        
        &-num {
          font-family: YouSheBiaoTiHei;
          font-size: 30px;
          font-weight: bold;
          letter-spacing: normal;
        }

        &-unit {
          margin-left: 4px;
          font-size: 14px;
          font-weight: normal;
          letter-spacing: normal;
          color: rgba(255, 255, 255, 0.8);
        }
      }

    }

    &-data {

      &-item {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        &-icon {
          width: 64px;
          height: 64px;
          margin-right: 20px;
        }

        &-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: start;

          &-name {
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: normal;
            line-height: 24px;
            letter-spacing: normal;
            color: #FFFFFF;
            margin-bottom: 8px;
          }

          &-data {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            &-num {
              font-family: YouSheBiaoTiHei;
              font-size: 28px;
              font-weight: normal;
              line-height: 32px;
              letter-spacing: normal;
              color: #FFFFFF;

              span {
                font-family: Microsoft YaHei;
                font-size: 14px;
                font-weight: normal;
                line-height: 20px;
                letter-spacing: normal;
                color: rgba(255, 255, 255, 0.8);
                vertical-align: baseline;
                margin-left: 4px;
              }
            }

            &-percent {
              font-family: YouSheBiaoTiHei;
              font-size: 24px;
              font-weight: normal;
              line-height: 32px;
              letter-spacing: normal;
              color: #FFFFFF;

              span {
                font-family: Microsoft YaHei;
                font-size: 14px;
                font-weight: normal;
                line-height: 20px;
                letter-spacing: normal;
                color: rgba(255, 255, 255, 0.8);
                margin-right: 4px;
              }
            }
          }
        }

        &:nth-child(2), &:nth-child(3), &:nth-child(4) {
          margin-top: 16px;
          &::before {
            display: block;
            content: '';
            width: 100%;
            height: 0px;
            border-top: 1px dashed rgba(10, 176, 254, 0.4);
            position: absolute;
            top: -8px;
          }
        }
      }
    }
  }
}
</style>
